<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/dialog.css">
    <link rel="stylesheet" href="css/animation.css">
    <link rel="stylesheet" href="css/page0.css">
    <link rel="stylesheet" href="css/page1.css">
    <link rel="stylesheet" href="css/page2.css">
    <link rel="stylesheet" href="css/page4.css">
    <link rel="stylesheet" href="css/page6.css">
    <link rel="stylesheet" href="css/page7.css">
    <link rel="stylesheet" href="css/fly.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="./js/html2canvas.min.js"></script>
    <script>
        // viewport 设置
        // 针对原来高清方案的基础, 增加了根据屏幕宽度计算不同font-size 来达到对不同屏幕的适配
        var win = window;
        win.flex = function (baseFontSize, fontscale) {
            var targetWidth = 375;
            var screenWidth = win.screen.width;
            var _baseFontSize = (baseFontSize || 100) * screenWidth / targetWidth;
            var _fontscale = fontscale || 1;

            var doc = win.document;
            var ua = navigator.userAgent;
            var matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
            var UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
            var isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
            var isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
            var dpr = win.devicePixelRatio || 1;
            if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
                //在部分4.3及以下安卓机型中，screen.width是物理像素宽度，暂时没有找到准确判断的方法，所以不做针对375宽度的缩放
                _baseFontSize = baseFontSize || 100;
                // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
                dpr = 1;
            }


            var scale = 1 / dpr;

            var metaEl = doc.querySelector('meta[name="viewport"]');
            if (!metaEl) {
                metaEl = doc.createElement('meta');
                metaEl.setAttribute('name', 'viewport');
                doc.head.appendChild(metaEl);
            }
            metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale +
                ',maximum-scale=' + scale + ',minimum-scale=' + scale);
            doc.documentElement.style.fontSize = _baseFontSize / 2 * dpr * _fontscale + 'px';
        };

        flex(100, 1);
    </script>
</head>

<body>
    <div id="page0">
        <div class="onload">
            正在努力加载中... (
            <span>80</span>%)
        </div>
        <div class="left_heart fly_left ">
            <div class="fly_heart">
            </div>
        </div>
        <div class="right_heart fly_right">
            <div class="fly_UP">
            </div>
        </div>
    </div>


    <div id="page1">
        <div class="page1_top">
            <img src="./assets/images/page1/page1_top_bg_01.png" alt="">
        </div>
        <div class="page1_cen">
            <img src="./assets/images/page1/page1_cen_bg_02.png" alt="">
            <div class="shine_line">
            </div>
            <div class="heart_face smile_face">

            </div>
            <div class="arrow fly_arrow">

            </div>
        </div>
        <div class="page1_bottom">
            <!-- <img src="./assets/images/page1/page1_bottom_bg_03.png" alt=""> -->
            <div class="title ">
                <img src="./assets/images/page1/title_content_05.png" class="title_content scale_title_page1" alt="">
            </div>
            <div class="unopened move_unopened">
            </div>
        </div>
        <div class="open open_box" id="open_box">
            <div class="open_icon">

            </div>
            <div class="hand move_hand">
            </div>
        </div>
        <div class="yellow_circle">
        </div>
    </div>


    <div id="page2" class="shine_bg">
        <div class="therm">
            <div class="word1 "></div>
            <div class="word2 "></div>
            <div class="word3 "></div>
            <div class="word4 "></div>
            <div class="word5 "></div>
            <div class="word6 "></div>
            <div class="therm_point">
            </div>
            <div class="therm_scale">
            </div>
        </div>
        <div class="hand_heart shine_heart"></div>
        <div class="walk_Man"></div>
        <div class="button"></div>
    </div>

    <div id="page4" class="page4">
        <div class="therm">
            <div class="red-zhuzi therm-son"></div>
        </div>
        <div class="therm_point">
        </div>
        <img class="ke-du" src="img4/刻度.png">
        <img class="boy biao-bai1" src="img4/boy.png">
        <img class="girl biao-bai1" src="img4/girl.png">
        <img class="circle biao-bai1" src="img4/circle.png">
        <img class="break-heart biao-bai1" src="img4/breakHeart.png">
        <div class="msg1">" 我喜欢你 "</div>
        <div class="msg2">" 我不喜欢你 "</div>
        <div class="msg3">" 为什么 "</div>
        <div class="msg4">" 喜欢你犯法 "</div>
        <div class="msg-fail1 biao-bai1">" 再见，初恋 "</div>
        <div class="msg-fail2 biao-bai1">" 龙哥第N-1次表白失败 "</div>


        <img class="heart biao-bai2" src="img4/broken_heart1.png">
        <img class="circle2 biao-bai2" src="img4/circle2.png">
        <div class="msg11">" 我暗恋你很久了 "</div>
        <div class="msg22">" 然后呢 "</div>
        <div class="msg33">" ... ... ... "</div>
        <div class="msg44">" ... ... ... "</div>
        <div class="msg-fail11 biao-bai2">" 再见，爱情 "</div>
        <div class="msg-fail22 biao-bai2">" 龙哥第N-10次表白失败 "</div>

        <img class="man biao-bai3" src="img4/man1.png">
        <img class="woman biao-bai3" src="img4/woman.png">
        <div class="msg111">" 小姐姐，问个路 "</div>
        <div class="msg222">" 你要去哪里 "</div>
        <div class="msg333">" 我要去你心里 "</div>
        <div class="msg444">" 我的心如大山你会迷路的 "</div>
        <div class="msg-fail111 biao-bai3">" 再见，套路 "</div>
        <div class="msg-fail222 biao-bai3">" 龙哥第N-20次表白失败 "</div>
        <div class="my-audio" >
            <audio src="vedio/keybord.mp3" controls="controls" preload id="keybord" hidden />
            <audio src="vedio/乌鸦.mp3" controls="controls" preload id="wuya" hidden />
            <audio src="vedio/笑声.mp3" controls="controls" preload id="xiaosheng" hidden />
            <audio src="vedio/嘘声.mp3" controls="controls" preload id="xusheng" hidden />
            <audio src="vedio/轻快.mp3" controls="controls" preload id="qingkuai" hidden />
            <audio src="vedio/ILoveYou.mp3" controls="controls" preload id="iloveyou" hidden />
            <audio src="vedio/bgm.mp3" controls="controls" preload id="bgm" hidden />
            <audio src="vedio/didi.mp3" controls="controls" preload id="didi" hidden />
        </div>
    </div>
    <div id="page5" class="page5">
        <img class="icon1" src="img4/icon1.png">
        <div class="zhuzi zhuzi-move"></div>
        <div class="jump_heart"></div>
        <img class="zhiwen" src="img4/zhiwen.png">
        <img class="page5-word6" src="img4/word6.png">
        <div class="word-box">
            <img class="page5-word1" src="img4/word1.png">
            <img class="page5-word2" src="img4/word2.png">
            <img class="page5-word3" src="img4/word3.png">
            <img class="page5-word4" src="img4/word4.png">
            <img class="page5-word5" src="img4/word5.png">
        </div>
        <div class="left-fly-heart">
            <div class="fly_heart">
            </div>
        </div>
        <div class="right-fly-heart">
            <div class="fly_UP">
            </div>
        </div>
    </div>


    <div id="page6">
            <div class="title scale_title"></div>
            <div class="form_wrap">
                <div class="form">
                    <div class="info1">
                        <div class="lable">
                            <img src="./assets/images/page6/lable1_03.png" alt="">
                        </div>
                        <div class="name">
                            <input class="name_input" type="text" placeholder="请填写">
                        </div>
                    </div>
                    <div class="info2">
                        <div class="lable">
                            <img src="./assets/images/page6/lable2_03.png" alt="">
                        </div>
                        <div class="place">
    
                            <select name="place" class="place_select">
                                <option value="0">请填写</option>
                                <option value="1">龙港新城</option>
                                <option value="2">月湖公园</option>
                                <option value="3">恒大逸合城</option>
                            </select>
    
                        </div>
                    </div>
                </div>
                <div class="city">
                    <div class="line1">
                        <img src="./assets/images/page6/city1.png" alt="">
                        <img src="./assets/images/page6/city2.png" alt="">
                    </div>
                    <div class="line2">
                        <img src="./assets/images/page6/city3.png" alt="">
                    </div>
                </div>
            </div>
    
            <div class="wave wave1">
                <div></div>
            </div>
            <div class="wave wave2"></div>
            <div class="arrow move_arrow"></div>
    
            <div class="tipsbg tipsinfo">
                <div class="dialog">
                    <div class="dialog_title">
                        <strong>信息提示</strong>
                    </div>
                    <div class="dialog_content">
                        请选择你想表白的对象
                    </div>
                    <div class="dialog_btn">
                        确定
                    </div>
                </div>
            </div>
        </div>

    <div id="page7" class="page7">
        <img class="click-me" src="img7/click.png">
        <img id="canvasImgBox"/>
        <div id="imgBox" class="img-box">
            <div id="TaName"></div>
            <img id="place" src="img7/bg1.png">
            <div class="qr-box">
                <img class="qr-code" src="img7/qrcode.png">
                <p>即刻生成专属告白海报</p>
            </div>
            <p class="des"></p>
            <p class="date">8月17日 全城 SAY LOVE</p>
        </div>
        <div id="saveBox" class="save-box">
            <img src="img7/save.png">
        </div>

    </div>
    <script src="js/common.js"></script>

    <div class="hide-area">
        <img src="./assets/images/page2/hand_heart/hand_heart1.png">
        <img src="./assets/images/page2/hand_heart/hand_heart2.png">
        <img src="./assets/images/page2/hand_heart/hand_heart3.png">
        <img src="./assets/images/page1/page1_top_bg_01.png">
        <img src="./assets/images/page1/page1_cen_bg_02.png">
        <img src="./assets/images/page1/page1_bottom_bg_03.png" >
        <img src="./assets/images/page1/title_content_05.png">
        <img src="./assets/images/page2/walk_man_05.png">
        <img src="./assets/images/page2/page2_bg1.png">
        <img src="./assets/images/page2/page2_bg2.png">

        <img src="img4/bg1.png">
        <img src="img4/boy.png">
        <img src="img4/girl.png">
        <img src="img4/man1.png">
        <img src="img4/man2.png">
        <img src="img4/woman.png">
        <img src="img4/刻度.png">
        <img src="img4/柱状图.png">
        <img src="img4/背景线2.png">
        <img src="img4/broken_heart1.png">
        <img src="img4/broken_heart3.png">
        <img src="img7/bg1.png">
        <img src="img7/bg2.png">
        <img src="img7/bg3.png">
        <img src="img7/qrcode.png">
    </div>

</body>

</html>